<template>
	<!-- 不能用v-if (i: 每个tab页的专属下标;  index: 当前tab的下标; 申明在 MescrollMoreItemMixin )-->
	<view v-show="i === index" class="zhushou-big" :style="{backgroundSize:'100% '+dwImgHeight}">
		<!-- top="120"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
		<mescroll-body :ref="'mescrollRef'+i" :top="topXp+45+'px'" @init="mescrollInit"  :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
			
			<u-tabs :list="tabs_title" @click="tabsClick" lineWidth="30" lineColor="#376FFF" :current="current" :activeStyle="{
				color:'#000',
				fontWeight: 'bold',
				margin:'0 10px',
				fontSize:'16px'
			}" :inactiveStyle="{
				margin:'0 10px',
				color:'#000',
				fontSize:'14px'
			}"></u-tabs>
			
			<scroll-view class="tabs-nav-deputy" scroll-x="true" refresher-default-style='none'>
				<view :class="['tabs-nav-deputy-item',current_deputy == index ? 'tabs-nav-deputy-select' : '']" v-for="(item,index) in tabs_title[current].children" :key="index" @click="deputyClick(item,index)">{{item.name}}</view>
			</scroll-view>
			
			<view class="assistant-list">
				<view class="assistant-list-left">
					<view class="assistant-list-item" v-for="(item,index) in assistant_list" :key="index" v-if="index%2 == 0" @click="gotoChat(item)">
						<view class="assistant-use">
							<image src="../../static/assist_icon_hot@2x.png" class="use-huo" mode=""></image>
							{{item.use_count}}人在用
						</view>
						<view class="assistant-img-container">
							<image class="assistant-banner" :src="item.icon" mode=""></image>
						</view>
						<view class="assistant-bottom">
							<view class="assistant-bottom-name">
								{{item.name}}
							</view>
							<view class="assistant-bottom-text">
								{{item.description}}
							</view>
						</view>
					</view>
				</view>
				<view class="assistant-list-right">
					<view class="assistant-list-item" v-for="(item,index) in assistant_list" :key="index" v-if="index%2 != 0" @click="gotoChat(item)">
						<view class="assistant-use">
							<image src="../../static/assist_icon_hot@2x.png" class="use-huo" mode=""></image>
							{{item.use_count}}人在用
						</view>
						<view class="assistant-img-container">
							<image class="assistant-banner" :src="item.icon" mode=""></image>
						</view>
						<view class="assistant-bottom">
							<view class="assistant-bottom-name">
								{{item.name}}
							</view>
							<view class="assistant-bottom-text">
								{{item.description}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import http from '@/api/api-index.js'
	
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		props:{
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default(){
					return 0
				}
			},
			topXp:{
				type:Number,
				default(){
					return 0
				}
			}
		},
		data() {
			return {
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 空空如也 ~', // 提示
					}
				},
				tabs_title:[],
				tabs_text:[],
				current:0,
				current_deputy:0,
				assistant_list: [] ,//列表数据
				page:1,
				pageSize:20,
				select_id:'',//选中的ID
				dwImgHeight:'0px',//背景图的高度
			}
		},
		watch:{
			topXp(a,b){
				const chubili = 750/450
				uni.getSystemInfo({
					success: (res) => {
						let screenWidth = res.screenWidth
						let bgImgHeight = screenWidth/chubili
						this.dwImgHeight = bgImgHeight+'px'
					}
				})
			}
		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				if(this.select_id == ''){
					//获取头部导航
					let _this = this
					uni.showLoading()
					http.getZhushouType().then((res)=>{
						uni.hideLoading()
						if(res.data.code == 200){
							let data = res.data.result
							_this.tabs_title = data
							_this.select_id = data[0].children[0].id
							http.getZhushouList({
								category_id:this.select_id,
								page:page.num,
								limit:this.pageSize
							}).then((res)=>{
								uni.hideLoading()
								if(res.data.code == 200){
									let data = res.data.result
									this.mescroll.endSuccess(data.length);
									if(page.num == 1) this.assistant_list = []; //如果是第一页需手动制空列表
									this.assistant_list = this.assistant_list.concat(data)
								}else{
									uni.showToast({
										title: res.data.msg,
										icon:'error'
									})
								}
							})
						}
					})
				}else{
					http.getZhushouList({
						category_id:this.select_id,
						page:page.num,
						limit:this.pageSize
					}).then((res)=>{
						uni.hideLoading()
						if(res.data.code == 200){
							let data = res.data.result
							this.mescroll.endSuccess(data.length);
							if(page.num == 1) this.assistant_list = []; //如果是第一页需手动制空列表
							this.assistant_list = this.assistant_list.concat(data)
						}else{
							uni.showToast({
								title: res.data.msg,
								icon:'error'
							})
						}
					})
				}
			},
			//点击空布局按钮的回调
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			},
			tabsClick(item){
				this.current = item.index
				this.deputyClick(item.children[0],0)
			},
			deputyClick(item,index){
				this.current_deputy = index
				this.select_id = item.id
				this.assistant_list = []// 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
				uni.showLoading()
				http.getZhushouList({
					category_id:this.select_id,
					page:this.page,
					limit:this.pageSize
				}).then((res)=>{
					uni.hideLoading()
					if(res.data.code == 200){
						let data = res.data.result
						this.assistant_list = data
					}else{
						uni.showToast({
							title: res.data.msg,
							icon:'error'
						})
					}
				})
			},
			// 去聊天
			gotoChat(item){
				let user_id = uni.getStorageSync('uid')
				if(!user_id){
					uni.showModal({
						title: '提示',
						content: '暂无登录，请前去登录',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}else{
					uni.setStorageSync('nowAssistant',item)
					uni.navigateTo({
						url:'/pages/singleChat/singleChat?appid='+item.id+'&name='+item.name+'&welcome_message='+item.welcome_message+'&askQuestions='+JSON.stringify(item.rec_question)
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.zhushou-big{
		width: 100%;
		background: $bg-color;
		background-image: url('https://ai.ytslgz.cn/static/xcx/xcx_bg.png');
		background-repeat: no-repeat;
		background-attachment:fixed;
	}
	.tabs-nav-deputy{
		width: 100%;
		height:45px;
		white-space: nowrap;
		.tabs-nav-deputy-item{
			display: inline-block;
			line-height: 30px;
			height: 30px;
			padding: 2px 10px;
			font-size: 14px;
			border-radius: 10px;
			margin-left: 10px;
			margin-top: 5px;
			color: #333;
		}
		.tabs-nav-deputy-select{
			background: rgba(55,111,255,0.1);
			color:$main-color !important;
		}
	}
	.assistant-list{
		width: 100%;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		padding: 0 15px;
		justify-content: space-between;
		.assistant-list-left{
			width: 48%;
		}
		.assistant-list-right{
			width: 48%;
		}
		.assistant-list-item{
			width: 100%;
			height: 235px;
			border-radius: 10px;
			margin-top: 15px;
			overflow: hidden;
			position: relative;
			.assistant-use{
				position: absolute;
				left: 5px;
				top: 5px;
				font-size: 12px;
				color: #fff;
				text-align: center;
				height: 20px;
				line-height: 20px;
				z-index: 10;
				display: flex;
				flex-direction: row;
				align-items: center;
				.use-huo{
					width: 12px;
					height: 12px;
					margin-right: 5px;
				}
			}
			.assistant-img-container{
				width: 100%;
				height: 100%;
				position: relative;
				.assistant-banner{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.assistant-img-container::before{
				content:" ";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				mix-blend-mode: multiply;
				background-color: rgba(0, 0, 0, 0.6); /*蒙版颜色和透明度*/
			}
			.assistant-bottom{
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 10;
				width: 100%;
				box-sizing: border-box;
				padding: 10px;
				color: #fff;
				.assistant-bottom-name{
					font-size: 20px;
					font-weight: bold;
				}
				.assistant-bottom-text{
					width: 100%;
					font-size: 14px;
					max-height: 55px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					margin-top: 10px;
				}
			}
			
		}
	}
</style>
